<!DOCTYPE html>
<html>
<head>
    <title>Admin</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/back-end.css"/>
    <link rel="stylesheet" href="css/table.css"/>
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#tableorder').dataTable();
            $('#tableimage').dataTable();
            $('#tableuser').dataTable();
            $('#tabletypeimage').dataTable();
            var root = $('#menu');
            $('#menu li:eq(0)').addClass('active');
            $('#menu li').click(function(){
               var index = $('#menu').find('li.active').index();
               var curr = $(this).index();
               $('#menu li:eq('+index+')').removeClass('active');
               $('#menu li:eq('+curr+')').addClass('active');
                switch(index)
                {
                    case 0 :
                        $('#order').addClass('hide');break;
                    case 1 :
                        $('#image').addClass('hide');break;
                    case 2 :
                        $('#typeimage').addClass('hide');break;
                    case 3 :
                        $('#user').addClass('hide');break;
                    case 4 :
                        $('#changepass').addClass('hide');break;
                }
                switch(curr)
                {
                    case 0 :
                       $('#order').removeClass('hide');break;
                    case 1 :
                       $('#image').removeClass('hide');break;
                    case 2 :
                        $('#typeimage').removeClass('hide');break;
                    case 3 :
                       $('#user').removeClass('hide');break;
                    case 4 :
                       $('#changepass').removeClass('hide');break;
                 }




            });
        } );
    </script>
</head>
<body>
    <button class="btn btn-primary logout" value="Logout"><i class="icon-off"></i> Logout</button>
    <br>
    <div class="main">
        <div class="navbar">
            <div class="navbar-inner">
                <ul class="nav" id="menu">
                    <li><a href="#">Trang Chủ</a></li>
                    <li><a href="#">Tranh</a></li>
                    <li><a href="#">Thể Loại Tranh</a></li>
                    <li><a href="#">Quản Lí User</a></li>
                    <li><a href="#">Đổi Mật Khẩu</a></li>
                </ul>
            </div>
        </div>
        <div id="order">
            <table class="table table-hover table-bordered" id="tableorder">
                <thead>
                    <tr>

                        <td>#</td>
                        <td>Tên Khách Hàng</td>
                        <td>Tên Tranh</td>
                        <td>Số Lượng</td>
                        <td>Ngày Mua</td>
                        <td>Trạng Thái</td>
                        <td>Tổng Tiền</td>
                        <td>Xóa</td>
                    </tr>
                </thead>
                <tr>
                    <td>1</td>
                    <td>nguyen</td>
                    <td>asbc</td>
                    <td>2</td>
                    <td>1122</td>
                    <td>Ok</td>
                    <td>dd</td>
                    <td>
                        <a href="#"><span class="icon-remove"></span>&nbsp Xóa</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>nguyens</td>
                    <td>asbcs</td>
                    <td>3</td>
                    <td>1122</td>
                    <td>Ok</td>
                    <td>dd</td>
                    <td>
                        <a href="#"><span class="icon-remove"></span>&nbsp Xóa</a>
                    </td>
                </tr>
            </table>
        </div>
        <div id="image" class="hide">
            <a href="#myModal" role="button" class="btn btn-primary addimage" data-toggle="modal">Thêm Tranh</a>
            <table class="table table-hover table-bordered" id="tableimage">
                <thead>
                <tr>

                    <td>#</td>
                    <td>

                        Tên Tranh
                    </td>
                    <td>Tiền</td>
                    <td>Số Lượng Bán</td>
                    <td>Tồn Kho</td>
                    <td></td>
                </tr>
                </thead>
                <tr>
                    <td>1</td>
                    <td>
                        <img src="images/17.jpg" class="img-rounded">
                        <br>
                        nguyen
                    </td>
                    <td>asbc</td>
                    <td>2</td>
                    <td>1122</td>

                    <td>
                        <a href="#"><span class="icon-edit"></span>&nbsp Sữa</a>
                        <a href="#"><span class="icon-remove"></span>&nbsp Xóa</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>
                        <img src="images/17.jpg" class="img-rounded">
                        <br>
                        Lan Đỏ
                    </td>
                    <td>asbcs</td>
                    <td>3</td>
                    <td>1122</td>
                    <td>
                        <a href="#"><span class="icon-edit"></span>&nbsp Sữa</a>
                        <a href="#"><span class="icon-remove"></span>&nbsp Xóa</a>
                    </td>
                </tr>
            </table>
            <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Thêm Tranh</h3>
                </div>
                <div class="modal-body">
                    <label>Tên Tranh : </label>
                    <input type="text"/>
                    <label>Số Lượng </label>
                    <input type="text"/>
                    <label >Loại Tranh :</label>
                    <select class="span2">
                        <option value="0">abc</option>
                        <option value="1">abc</option>
                        <option value="2">abc</option>
                        <option value="3">abc</option>
                    </select>
                    <label >Giá:</label>
                    <input type="text"/>
                    <label>Hình : </label>
                    <input type="file"/>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Hủy</button>
                    <button class="btn btn-primary">Thêm</button>
                </div>
            </div>
        </div>
        <div id="typeimage" class="hide">
            <a href="#myModaltype" role="button" class="btn btn-primary addimage" data-toggle="modal">Thêm Thể Loại Tranh</a>
            <table class="table table-hover table-bordered" id="tabletypeimage">
                <thead>
                <tr>

                    <td>#</td>
                    <td>Tên</td>
                    <td>Mô Tả</td>
                    <td></td>
                </tr>
                </thead>
                <tr>
                    <td>1</td>
                    <td>nguyen</td>
                    <td>asbc</td>
                    <td>
                        <a href="#"><span class="icon-edit"></span>&nbsp Sữa</a>
                        <a href="#"><span class="icon-remove"></span>&nbsp Xóa</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>nguyens</td>
                    <td>asbcs</td>

                    <td>
                        <a href="#"><span class="icon-edit"></span>&nbsp Sữa</a>
                        <a href="#"><span class="icon-remove"></span>&nbsp Xóa</a>
                    </td>
                </tr>
            </table>
            <div id="myModaltype" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabeltype">Thêm Thể Loại Tranh</h3>
                </div>
                <div class="modal-body">
                    <label>Tên : </label>
                    <input type="text"/>
                    <label>Mô Tả: </label>
                    <textarea name="description" id="description" cols="30" rows="10"></textarea>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Hủy</button>
                    <button class="btn btn-primary">Thêm</button>
                </div>
            </div>
        </div>
        <div id="user" class="hide">
            <table class="table table-hover table-bordered" id="tableuser">
                <thead>
                    <tr>

                        <td>#</td>
                        <td>Username</td>
                        <td>Tên</td>
                        <td>Email</td>
                        <td>Địa Chỉ</td>
                        <td>Số Điện Thoại</td>
                        <td></td>
                    </tr>
                </thead>
                <tr>
                    <td>1</td>
                    <td>
                        nguyen
                    </td>
                    <td>asbc</td>
                    <td>2</td>
                    <td>1122</td>
                    <td>1122</td>

                    <td>
                        <a href="#"><span class="icon-lock"></span>&nbspLock</a>
                        <a href="#"><span class="icon-ok"></span>&nbspUnlock</a>
                        <a href="#"><span class="icon-edit"></span>&nbsp Sữa</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>
                        Lan Đỏ
                    </td>
                    <td>asbcs</td>
                    <td>3</td>
                    <td>1122</td>
                    <td>1122</td>
                    <td>
                        <a href="#"><span class="icon-lock"></span>&nbspLock</a>
                        <a href="#"><span class="icon-ok"></span>&nbspUnlock</a>
                        <a href="#"><span class="icon-edit"></span>&nbsp Sữa</a>

                    </td>
                </tr>
            </table>
        </div>
        <div id="changepass" class="hide">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputPassword">Mật Khẩu Mới</label>
                    <div class="controls">
                        <input type="text" id="inputPassword" placeholder="Password">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputPasswordConfirm">Nhập Lại Mật Khẩu :</label>
                    <div class="controls">
                        <input type="password" id="inputPasswordConfirm" placeholder="Password Confirm">
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">

                        <button type="submit" class="btn btn-primary">Lưu</button>
                        <button type="button" class="btn">Hủy</button>
                    </div>
                </div>
            </form>
        </div>

    </div>

</body>
</html>